<template>
  <div class="scroll-wrap">
    <el-table
      class="top-table selectOption"
      :data="tableData"
      border
      style="
        width: 100%;
        margin: 0 auto;
        --el-table-border-color: none;
        --el-table-bg-color: none;
        --el-table-tr-bg-color: none;
      "
      :row-class-name="tableRowClassName"
      :header-row-class-name="tableHeaderRowClassName"
      :cell-style="{
        color: '#FFFFFF',
        'text-align': 'center',
        'font-family': 'DINPro',
      }"
      :header-cell-style="{
        backgroundColor: 'transparent !important',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'auto',
      }"
    >
      <el-table-column label="顺序号" width="90" show-overflow-tooltip>
        <template #default="scope">
          <span>
            {{ scope.row.sort }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        label="产品"
        show-overflow-tooltip
        width="340"
      />
      <el-table-column
        prop="furnaceBatch"
        label="生产批号"
        show-overflow-tooltip
        width="130"
      />
      <!-- <el-table-column
        prop="meltedStatus"
        label="熔炼->造型->浇注"
        show-overflow-tooltip
      /> -->
      <el-table-column prop="meltedStatus" label="熔炼" show-overflow-tooltip />
      <el-table-column
        prop="modelingStatus"
        label="造型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="pouringStatus"
        label="浇注"
        show-overflow-tooltip
      />
    </el-table>

    <div class="scroll-content">
      <vue3-seamless-scroll
        class="scroll-list"
        :list="tableData"
        :hover="true"
        :step="1"
        :wheel="true"
        :isWatch="true"
        :limitScrollNum="16"
        :singleHeight="45"
        :singleWaitTime="3000"
        :key="scrollKey"
        v-model="isParse"
      >
        <el-table
          class="scroll-ul bottom-table selectOption"
          :data="tableData"
          border
          style="
            width: 100%;
            margin: 0 auto;
            --el-table-border-color: none;
            --el-table-bg-color: none;
            --el-table-tr-bg-color: none;
          "
          :row-class-name="tableRowClassName"
          :header-row-class-name="tableHeaderRowClassName"
          :cell-style="{
            color: '#FFFFFF',

            'font-family': 'DINPro',
          }"
          :header-cell-style="{
            backgroundColor: 'transparent !important',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'auto',
            height: '100%',
          }"
        >
          <el-table-column
            label="顺序号"
            width="80"
            show-overflow-tooltip
            align="center"
          >
            <template #default="scope">
              <span>
                {{ scope.row.sort }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productName"
            label="产品"
            show-overflow-tooltip
            width="340"
          >
            <template #default="scope">
              <span>
                {{ scope.row.productName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="furnaceBatch"
            label="生产批号"
            show-overflow-tooltip
            align="center"
            width="130"
          >
            <!-- <template #default="scope">
              <span>
                {{
                  dictionaryStore.filterDictName(
                    "BiProductStatus",
                    scope.row.furnaceBatch
                  ) || ""
                }}
              </span>
            </template> -->
          </el-table-column>
          <el-table-column prop="meltedStatus" label="熔炼" align="center">
            <!-- <template #default="scope">
              <span>
                {{
                  dictionaryStore.filterDictName(
                    "BiProductStatus",
                    scope.row.meltedStatus
                  ) || ""
                }}
              </span>
            </template> -->
            <template #default="scope">
              <div
                v-if="scope.row.meltedStatus"
                class="crilcle"
                :style="{
                  backgroundColor:
                    scope.row.meltedStatus == 1 ? 'yellow' : 'green',
                }"
              >
                <!-- <el-progress
                  :text-inside="false"
                  :stroke-width="24"
                  :color="scope.row.meltedStatus == 1 ? 'yellow' : 'green'"
                  :percentage="100"
                /> -->
              </div>
              <span v-else>{{ "" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="modelingStatus" label="造型" align="center">
            <!-- <template #default="scope">
              <span>
                {{
                  dictionaryStore.filterDictName(
                    "BiProductStatus",
                    scope.row.modelingStatus
                  ) || ""
                }}
              </span>
            </template> -->
            <template #default="scope">
              <div
                v-if="scope.row.modelingStatus"
                class="crilcle"
                :style="{
                  backgroundColor:
                    scope.row.modelingStatus == 1 ? 'yellow' : 'green',
                }"
              >
                <!-- <el-progress
                  :format="''"
                  :stroke-width="24"
                  :color="scope.row.modelingStatus == 1 ? 'yellow' : 'green'"
                  :percentage="100"
                />  -->
              </div>
              <span v-else>{{ "" }}</span></template
            >
          </el-table-column>
          <el-table-column prop="pouringStatus" label="浇注" align="center">
            <!-- <template #default="scope">
              <span>
                {{
                  dictionaryStore.filterDictName(
                    "BiProductStatus",
                    scope.row.pouringStatus
                  ) || ""
                }}
              </span>
            </template> -->
            <template #default="scope">
              <div
                v-if="scope.row.pouringStatus"
                class="crilcle"
                :style="{
                  backgroundColor:
                    scope.row.pouringStatus == 1 ? 'yellow' : 'green',
                }"
              >
                <!-- <el-progress
                  :text-inside="false"
                  :stroke-width="24"
                  :color="scope.row.pouringStatus == 1 ? 'yellow' : 'green'"
                  :percentage="100"
                />  -->
              </div>
              <span v-else>{{ "" }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="meltedStatus" label="熔炼">
            <template #default="scope">
              <span v-if="isShowPercentage(scope.row)">
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="PercentageData(scope.row)"
                /> </span></template
          ></el-table-column> -->
        </el-table></vue3-seamless-scroll
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { deepClone } from "@/utils/commonHooks";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { Row } from "element-plus/es/components/table-v2/src/components";
import { backgroundClip } from "html2canvas/dist/types/css/property-descriptors/background-clip";
const dictionaryStore = useDictStoreHook();
const props = defineProps({
  // table数据
  planBIDTOS: {
    type: Array,
    default: () => [],
  },
  // table显示行数
  tableColumnNum: {
    type: Number,
    default: 20,
  },
});

const isParse = ref(false);
const { planBIDTOS, tableColumnNum } = toRefs(props);
const tableData = ref<any>([]);

const tableObject = {
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  deleted: "",
  enabled: "",
  equipCode: "",
  equipId: "",
  equipName: "",
  furnaceBatch: "",
  id: "",
  ids: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  meltedStatus: "",
  modelingStatus: "",
  planStatus: "",
  pouringStatus: "",
  productCode: "",
  productFigureNumber: "",
  productId: "",
  productName: "",
  productionDate: "",
  remarks: "",
  sort: "",
  version: "",
};

const scrollKey = ref<number>(1);
watch(
  () => planBIDTOS,
  (newVal) => {
    console.log(newVal, "newVal");

    const data = deepClone(newVal.value || []);
    if (data.length > tableColumnNum.value) {
      tableData.value = data;
      // tableData.value = data.slice(0, tableColumnNum.value);
    } else {
      let resultData = data;
      const resultNum = tableColumnNum.value - data.length;
      if (resultNum > 0) {
        for (let i = 0; i < resultNum; i++) {
          resultData.push(tableObject);
        }
      }
      tableData.value = resultData;
    }
    console.log(tableData.value.length, "tableData.value");

    if (tableData.value.length > 16) {
      console.log(11);

      setTimeout(() => {
        isParse.value = true;
      }, 3000);
    } else {
      isParse.value = false;
    }
    scrollKey.value = Number(new Date());
  },
  {
    deep: true,
    immediate: true,
  }
);

// 行样式解析
function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
}

function tableHeaderRowClassName() {
  if (tableColumnNum.value === 16) {
    return "h-[50px]";
  }
  return "h-[28px]";
}

// 表格百分比处理
function handlePercentage(percent: any) {
  // let result = "";
  // if (percent && percent.includes("%")) {
  //   result = percent.split("%")[0];
  // }
  // console.log("Number(result)", Number(result));
  return Number(percent) || 0;
}

// 判断是否显示百分比
function isShowPercentage(row: any, title: string) {
  if (title == "1") {
    if (row.meltedStatus) {
      return true;
    } else {
      return false;
    }
  }
  if (title == "2") {
    if (row.modelingStatus) {
      return true;
    } else {
      return false;
    }
  }
  if (title == "3") {
    if (row.pouringStatus) {
      return true;
    } else {
      return false;
    }
  }
  // if (row?.id) {
  //   return true;
  // } else {
  //   return false;
  // }
}
// 判断显示多少百分比

function PercentageData(row: any, id: string) {
  // if (row?.id) {
  //   if (!row.meltedStatus) {
  //     return 0;
  //   }
  //   if (row.meltedStatus && row.modelingStatus) {
  //     return Number(2 / 3).toFixed(2) * 100;
  //   }
  //   if (row.meltedStatus && row.modelingStatus && row.pouringStatus) {
  //     return 100;
  //   }
  // } else {
  //   return 0;
  // }
  if (id == "1") {
    if (row.meltedStatus == 1) {
      return Number(1 / 2).toFixed(2) * 100;
    } else if (row.meltedStatus == 2) {
      return Number(2 / 2).toFixed(2) * 100;
    }
  }
  if (id == "2") {
    if (row.modelingStatus == 1) {
      return Number(1 / 2).toFixed(2) * 100;
    } else if (row.modelingStatus == 2) {
      return Number(2 / 2).toFixed(2) * 100;
    }
  }
  if (id == "3") {
    if (row.pouringStatus == 1) {
      return Number(1 / 2).toFixed(2) * 100;
    } else if (row.pouringStatus == 2) {
      return Number(2 / 2).toFixed(2) * 100;
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-wrap {
  width: 100%;
  height: 890px;
  overflow: hidden;
}
.scroll-header,
.scroll-content {
  width: 100%;
  display: flex;
}
.scroll-list {
  width: 100%;
  overflow: hidden;
}
.scroll-ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-li {
  width: 100%;
  display: flex;
  line-height: 35px;
}
// .scroll-li > span {
//   display: flex;
//   height: 35px;
//   line-height: 35px;
//   border-top: 1px solid #dcdfe6;
//   border-left: 1px solid #dcdfe6;
//   padding-left: 5px;
//   overflow: hidden;
// }
// .scroll-li > span:last-child {
//   border-right: 1px solid #dcdfe6;
// }
// .scroll-header .scroll-li {
//   background-color: #f8f9ff;
// }
// .scroll-header .scroll-li > span {
//   font-weight: bold;
//   border-top: none;
// }
// .scroll-content .scroll-ul:last-child .scroll-li {
//   border-bottom: 1px solid #dcdfe6;
// }
:deep(.bottom-table .el-table__header) {
  display: none;
}

:deep(.top-table .el-table__body-wrapper) {
  display: none;
}
// 整体表格样式
:deep(.el-table) {
  .el-table__border-left-patch {
    width: 0;
  }

  thead {
    // height: 78px;
    // background: rgba(15, 36, 62, 0.6);
    background: rgba(2, 79, 173, 0.3);
    .cell {
      font-size: 22px;
      line-height: 25px;
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      writing-mode: horizontal-tb;
      text-orientation: upright;
      color: transparent;
      background: linear-gradient(
          0deg,
          rgb(88, 175, 255) 0px,
          rgb(255, 255, 255) 100%
        )
        text;
      clip-path: inset(1px);
    }

    tr:nth-last-child(1) {
      border-right: none;
    }
  }
  tbody {
    tr {
      height: 45px;
      .cell {
        font-size: 20px;
        line-height: 25px;
      }
    }
    tr:hover {
      background-color: rgb(55, 90, 136) !important;
    }
    td.el-table__cell {
      background-color: transparent !important;
      border: none !important;
    }
  }

  .el-table__empty-text {
    color: rgb(199, 228, 240);
    font-size: 30px;
    line-height: 200px;
  }
}
// 单行样式
:deep(.evenRow) {
  background: rgba(15, 36, 62, 0.6);
  td {
    .cell {
      color: rgb(104, 201, 240);
    }
  }
}

// 双行样式
:deep(.oddRow) {
  background: rgba(10, 24, 42, 0.6);
  td {
    .cell {
      color: rgb(168, 190, 216);
    }
  }
}
// :deep(.el-progress) {
//   .el-progress-bar__outer {
//     background: rgba(74, 97, 126, 0.7);
//   }
//   .el-progress-bar__innerText {
//     font-size: 30px;
//     line-height: 40px;
//   }
//   .el-progress-bar__outer {
//     border-radius: 8px;
//   }
//   .el-progress-bar__inner {
//     border-radius: 8px;
//     background-image: linear-gradient(to right, #fa5a53, #fa5a53);
//   }
// }

:deep(.el-progress) {
  .el-progress-bar__outer {
    background: rgba(74, 97, 126, 0.7);
  }
  .el-progress-bar__innerText {
    font-size: 20px;
    margin-bottom: 20px;
  }
  // .el-progress-bar__outer {
  //   border-radius: 8px;
  // }
  // .el-progress-bar__inner {
  //   border-radius: 8px;
  //   background-image: linear-gradient(to right, #fa5a53, #fa5a53);
  // }
}

:deep(.el-table th.el-table__cell > .cell) {
  white-space: pre;
  // white-space: pre-wrap; // 也行。
}

.crilcle {
  width: 70px;
  height: 30px;
  border-radius: 5px;
}
</style>
